<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn1">存数据</button>
    <button class="btn2">获取数据</button>
    <button class="btn3">删除数据</button>
    <button class="btn4">删除所有数据</button>
    <button class="btn5">存储复杂数据</button>
    <script>
      /* 
持久化存储数据:
            服务端存储:
                文件存储
                session
                数据库
            客户端(浏览器端)
                cookie
                localStorage
                SessionStorage

*/
      let btn1 = document.querySelector(".btn1");
      let btn2 = document.querySelector(".btn2");
      let btn3 = document.querySelector(".btn3");
      let btn4 = document.querySelector(".btn4");
      let btn5 = document.querySelector(".btn5");

      //1.存localStorage.setItem("键名","键值")
      btn1.onclick = function () {
        //没有时效性
        //同源可以访问
        //大小 大概是5m
        //不会随着网络请求的发送而发送
        localStorage.setItem("myname", "张三");
        localStorage.setItem("age", 20);
      };
      //2.获取数据 getItem
      btn2.onclick = function () {
        let res = localStorage.getItem("myname");
        console.log(res);
      };

      //3.删除数据
      btn3.onclick = function () {
        localStorage.removeItem("age");
      };
      //
      // 4.删除所有localStorage；
      btn4.onclick = function () {
        localStorage.clear(); // 删除所有数据
      };

      //
      // 5.存储复杂数据类型
      // 把复杂数据类型转成json存储 ，获取再把json转成对象或者数组；
      btn5.onclick = function () {
        // let res = localStorage.getItem("arr");
        // console.log(JSON.parse( res));
        // let arr = [{name:"张三",age:20},{name:"lisi",age:21}]
        // // json
        // localStorage.setItem("arr",JSON.stringify(arr));
      };
    </script>
  </body>
</html>
